<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header class="el-header-home">
      <div class="collapse-btn" @click="toggleCollapse">

      </div>
      <div class="logo">
        <span v-text="project_name"></span>
      </div>
      <div class="header-right"></div>
    </el-header>

    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '45px' : '200px'">
        <el-menu
          background-color="#2C4257"
          text-color="#fff"
          active-text-color="#2c3542"
          unique-opened
          :collapse="isCollapse"
          :default-active="activePath"
          :collapse-transition="false"
        >
          <el-submenu v-for="menu in menuList" :index="menu.path">
            <template slot="title">
              <i :class="menu.icon"></i>{{ menu.title }}
            </template>
            <template v-for="child in menu.children">
              <el-menu-item :index="child.path">
                <a :href="child.linkUrl" target="right">
                  <i :class="menu.icon"></i>{{ child.title }}</a
                >
              </el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主体结构 -->
      <el-main
        ><iframe
          name="right"
          class="el-main"
          src="./#/diseaseManger"
          width="100%"
          height="100%"
        ></iframe
      ></el-main>
    </el-container>
  </el-container>
</template>

<script>
import iconfont from "@/assets/font/iconfont.css";
import global2 from "@/styles/main.css";
import home02 from "@/styles/home.css";

export default {
  name: "index.vue",
  data: function () {
    return {
      project_name: "道路检测数据管理系统",

      userId: "",
      activePath: "/2-1",
      /*菜单栏的折叠与收起*/
      isCollapse: false,
      iconsObj: {
        125: "iconfont icon-user",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
      },
      menuList: [
        {
          path: "1",
          title: "道路检测数据管理",
          icon: "iconfont icon-user",
          children: [
            {
              path: "/2-1",
              title: "病害信息管理",
              linkUrl: "./#/diseaseManger",
              icon: "iconfont icon-danju",
              children: [],
            },
            {
              path: "/2-2",
              title: "道路信息管理",
              linkUrl: "./#/roadManger",
              icon: "iconfont icon-danju",
              children: [],
            },
          ],
        },
      ],
    };
  },
  created() {
    //this.queryLoginUser()
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style scoped></style>
